<template>
  <div class="flex h-screen">
    <Sidebar />

    <div class="flex flex-col flex-1 overflow-y-auto">
      <header>
        <Header />

      </header>
      <div class="flex bg-[#f5f7f9] dark:bg-[#121212] px-2 sm:px-6 py-2">
        <NavBar />
      </div>
      <main class="flex-1 bg-[#f5f7f9] dark:bg-[#121212] px-2 sm:px-6 py-3 pt-0">
        <Main />
      </main>

      <footer class="bg-[#f5f7f9] dark:bg-[#121212]">
        <Footer />
      </footer>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import Header from "@/components/header.vue";
import Sidebar from "@/components/sidebar.vue";
import Footer from "@/components/footer.vue";
import Main from "@/components/main.vue";
import NavBar from '@/components/navbar.vue'
import { settingMode } from "@/stores/setting";
const settingsStore = settingMode()
// 监听屏幕宽度
const screenWidth = ref(window.innerWidth);
const handleResize = () => {
  screenWidth.value = window.innerWidth;
};
watch(screenWidth, (newWidth, oldWidth) => {
  settingsStore.screenWidth = newWidth
});
onMounted(() => {
  window.addEventListener("resize", handleResize)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>
<style scoped></style>